<template>
  <div class="comments">
    <div class="comment">
      <ul>
        <div class="nodata" v-if="list.length == ''">
          <div class="text">快来当第一个写评论的人</div>
          <div class="btn">写评论</div>
        </div>
        <li v-for="(item, index) in list" :key="index">
          <div class="nav_left">
            <div class="tou">
              <img
                src="../../assets/noimg.png"
                alt=""
                v-if="item.avatar == undefined || item.avatar == ''"
              />
              <img class="img-auto" :src="item.avatar" alt="" v-else />
            </div>
          </div>
          <div class="nav_center">
            <div class="user-box">
              <div class="user_name">
                <div class="aouth">{{ item.nickName }}</div>
                <div class="vip">Lv{{ item.grade }}</div>
              </div>
              <div class="right_bottom">
                {{ item.likes }}<van-icon name="good-job-o" />
              </div>
            </div>
            <div class="user-time-fen">
              <div class="star">
                <van-rate
                  v-model="item.grade"
                  :size="13"
                  allow-half
                  void-icon="star"
                  void-color="#eee"
                  color="Gold"
                />
              </div>
              <div class="user_time">{{ getCnDate(item.time/1000,0) }}</div>
            </div>
            <div class="user_nav">
              {{ item.comment }}
            </div>
          </div>
          <div class="nav_right">
            <div class="right_top">
              <!-- <img class="auot_img" src="../assets/sandian.png" alt="" /> -->
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "comments",
  props: {
    list: [],
  },
  methods: {
    getCnDate(unixTimeStamp = "", isType = 1) {
      let date1;
      if (unixTimeStamp) {
        date1 = new Date(unixTimeStamp * 1000);
      } else {
        date1 = new Date();
      }

      let weeks = ["日", "一", "二", "三", "四", "五", "六"];

      let year = date1.getFullYear(); // 年
      let month = date1.getMonth() + 1; // 月, 月份是从0开始算的 0 - 11
      let date = date1.getDate(); // 日

      let hour = date1.getHours(); // 时
      let minute = date1.getMinutes(); // 分
      let second = date1.getSeconds(); // 秒

      // 优化一下，一般在显示 月 日 时分秒的时候我们习惯按照两位的方式去显示；如果数字是一位的我们补齐一个0即可
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;

      let week = date1.getDay(); // 星期， 星期也是从0开始算的 0 是星期日；1是星期一
      // 2021年12月20日10:44:12
      // 2021-12-20 10:44:16
      return isType == 1
        ? year +
            "-" +
            month +
            "-" +
            date +
            "-" +
            hour +
            ":" +
            minute +
            ":" +
            second +
            "星期" +
            weeks[week]
        : `${year}-${month}-${date}`;
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  width: 100%;
  height: 100%;
  .user-box {
    display: flex;
    justify-content: space-between;
  }
  ul {
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    li {
      //   width: 100%;
      min-height: 80px;
      margin-top: 5px;
      padding-right: 0px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      .nav_left {
        width: 15%;
        height: 100%;
        .tou {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          overflow: hidden;
          border: 1px solid #ccc;
          margin-left: 15px;
        }
      }
      .nav_center {
        width: 70%;
        height: 100%;
        padding-bottom: 10px;
        // border-bottom: 1px solid #ccc;
        .user_name {
          //   width: 100%;
          height: 30px;

          .aouth {
            float: left;
            height: 100%;
            line-height: 30px;
            font-size: 13.5px;
            color: DeepSkyBlue;
          }
          .vip {
            // width: 45px;
            height: 15px;
            float: left;
            line-height: 15px;
            border: 1px solid #e4393c;
            margin-left: 3px;
            margin-top: 6px;
            color: #e4393c;
            border-radius: 3px;
            padding: 0px 3px;
          }
        }
        .user-time-fen {
          width: 100%;
          min-height: 30px;
          margin-bottom: 5px;
          display: flex;
          align-items: center;
          .star {
          }
        }
        .user_time {
          //   width: 100%;
          line-height: 30px;
          color: gray;
          margin-left: 10px;
          height: 30px;
        }
      }
      .nav_right {
        width: 0%;
        min-height: 80px;
        position: relative;
        // border-bottom: 1px solid #ccc;

        .right_top {
          position: absolute;
          width: 10px;
          height: 30px;
          right: 0;
        }
        .right_bottom {
          position: absolute;
          width: 100%;
          height: 30px;
          bottom: 0px;
          line-height: 30px;
          text-align: center;
          font-size: 00.4rem;
        }
      }
    }
  }
}
.img-auto {
  width: 100%;
  display: block;
}
.nodata {
  margin-top: 20px;
  div {
    text-align: center;
  }
  .btn {
    border: 1px solid #e4393c;
    width: 80px;
    height: 25px;
    line-height: 25px;
    margin: 10px auto;
    border-radius: 20px;
    color: #e4393c;
  }
}
</style>